<template>
  <div class="m-page" ref="pageRef">
    <m-header title="来料待检看板"></m-header>
    <div class="m-body">
      <m-row :gutter="20" class="first-floor">
        <m-col :span="24 / totals1.length" v-for="t1 in totals1" :key="t1.color">
          <m-num-board align="horizontal" :color="t1.color" :title="t1.title" :number="t1.number" :uom="t1.uom" />
        </m-col>
      </m-row>
      <m-row :gutter="20" class="second-floor">
        <m-col :span="24 / totals2.length" v-for="t2 in totals2" :key="t2.color">
          <m-num-board align="horizontal" :color="t2.color" :title="t2.title" :number="t2.number" :uom="t2.uom" />
        </m-col>
      </m-row>
      <m-row :gutter="20" class="third-floor">
        <m-col :span="24">
          <m-box title="来料待检验清单">
            <m-scroll-board
              :row-num="10"
              :loading="loading"
              :cols="columns"
              :datas="tableData"
              :config="scrollBoardConfig"
            />
          </m-box>
        </m-col>
      </m-row>
    </div>
  </div>
</template>

<script setup>
// 业务组件
// import top10Echart from "@/views/WarehouseBoard/components/top10Echart/index.vue"
// 其他方法
import http from "@/utils/request"
import { getUrlParamsByName, calcRate, windowResize } from "@/utils/tools"
// vue提供的api
import { ref, onBeforeMount, onMounted } from "vue"

const service = {
  API_GET_HEADER: "v1/kanban/inspection/GetIQCInspectionHeader",
  API_GET_LIST: "v1/kanban/inspection/GetIQCInspectionData",
}

const totals1 = ref([
  { color: "#FFF", title: "本月收货总批次", code: "monthtotal", number: 0 },
  { color: "#FFF", title: "本月待检批次", code: "monthWaitInspectTotal", number: 0 },
  { color: "#FFF", title: "本月已检批次", code: "monthInspectedTotal", number: 0 },
  { color: "#FFF", title: "本月NG批次", code: "monthNGTotal", number: 0 },
  { color: "#FFF", title: "本月合格率", code: "monthOkRate", number: 0, uom: "%" }
])
const totals2 = ref([
  { color: "#FFF", title: "当日收货总批次", code: "todayTotal", number: 0 },
  { color: "#FFF", title: "当日待检批次", code: "dayWaitInspctTotal", number: 0 },
  { color: "#FFF", title: "当日已检批次", code: "dayInspectedTotal", number: 0 },
  { color: "#FFF", title: "当日NG批次", code: "dayNGTotal", number: 0 },
  { color: "#FFF", title: "当日合格率", code: "dayOkRate", number: 0, uom: "%" }
])

const columns = ref([
  { width: 40, title: "序号", type: "seq", align: "center" },
  { width: 170, title: "送货单号", property: "DELIVERY_NO" },
  { width: 170, title: "检验单号", property: "BILL_NO" },
  { width: 180, title: "物料编码", property: "MITEM_CODE" },
  { width: 280, title: "物料描述", property: "MITEM_DESC" },
  { width: 250, title: "供应商", property: "SUPPLIER_NAME" },
  { width: 160, title: "接收数量", property: "REQ_QTY" },
  { width: 120, title: "单位", property: "UOM" },
  { width: 180, title: "报检时间", property: "DATETIME_CREATED" },
  { width: 160, title: "到料时长(分钟)", property: "COST_TIME" },
  { width: 120, title: "检验状态", property: "STATUS_DESC" },
  // {
  //   width: 150,
  //   title: "状态",
  //   property: "状态",
  //   formatter: ({ value }) => {
  //     return `<span style="color: ${randomColor()}">${value}</span>`
  //   }
  // }
])
const tableData = ref([])
const loading = ref(false)

const scrollBoardConfig = ref({
  headerBGC: "#222D75", // 标题
  oddRowBGC: "#070750", // 奇数
  evenRowBGC: "#0A2732", // 偶数
  headerHeight: 54,
})

// 获取：表头信息
async function getTableHeaderData() {
  loading.value = true
  try {
    const params = {
      OrgId: orgId.value, // 组织id
      Enterpriseid: "*"
    }
    const data = await http.get(service.API_GET_HEADER, params)
    // console.log("获取：表头信息", data)
    totals1.value.forEach(r => {
      r.number = data[r.code] || 0
    })
    totals2.value.forEach(r => {
      r.number = data[r.code] || 0
    })
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
// 获取：列表数据
async function getTableData() {
  loading.value = true
  try {
    const params = {
      page: 1,
      pageSize: 99999999,
      OrgId: orgId.value, // 组织id
      Enterpriseid: "*"
    }
    const data = await http.get(service.API_GET_LIST, params)
    console.log("获取：列表数据", data)
    tableData.value = data.data.result
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const orgId = ref("")
async function init() {
  // if (location.origin.indexOf("localhost") > -1 || location.origin.indexOf("127.0.0.1") > -1) {
  //   orgId.value = "dd10517f7d3e405aa9097cfd618c6e6b" // 范湖工厂
  // } else {
  //   orgId.value = getUrlParamsByName("orgId")
  // }
  orgId.value = getUrlParamsByName("orgId")
  // console.log(1111111111, orgId.value)
  getTableHeaderData()
  getTableData()

  windowResize()
}

let timeId = null
onBeforeMount(async () => {
  init()
  timeId = setInterval(
    () => {
      init()
    },
    1000 * 60 * 10
  )
})

onBeforeUnmount(async () => {
  clearInterval(timeId)
})
</script>
<style lang="less" scoped>
.m-page {
  .m-body {
    .m-row {
      margin-bottom: 0;
      &.first-floor,
      &.second-floor {
        height: 64px;
        .m-col {
          height: 100%;
          ::v-deep(.m-num-board) {
            .m-digital {
              font-size: 20px;
            }
            .title {
              font-size: 20px;
              // color: #FF7F50;
              color: #FFF;
            }
          }
        }
      }
      &.second-floor {
        .m-col {
          ::v-deep(.m-num-board) {
            .m-digital {
              font-size: 20px;
            }
            .title {
              font-size: 20px;
              // color: #00FFFF;4
              color: #FFF;
            }
          }
        }
      }
      &.third-floor {
        height: calc((100% - 64px - 64px));
        .m-col {
          height: 100%;
          padding-left: 0 !important;
          padding-right: 0 !important;
          .m-box {
            padding: 0;
          }
        }
      }
    }
  }
}
</style>
